<template>
	<div class="search-author global-display global-a-items"
	v-for="(item,index) in authorData" :key="index">
		<div>
			<img :src="item.avatarUrl" alt="">
		</div>
		<div class="search-author-name">
			<p>{{item.nickname}}</p>
			<p>粉丝：{{item.numberOfFans}}</p>
		</div>
		<div :class="[item.concernedUser ? 'yiguanzhu' : 'weiguanzhu']"
		@click="attentionAuthor(item.concernedUser,item.uid,index)"
		>{{item.concernedUser ? '已关注' : '+ 关注'}}</div>
	</div>
	<!-- 如果没有数据 -->
	<van-empty
		v-if="authorData.length === 0"
		image="https://diancan-1252107261.cos.accelerate.myqcloud.com/lvyou/icon/kong-zhuang-tai.png"
		image-size="80"
		description="没有更多啦"
	/>
</template>

<script setup>
	import request from '@/api/request.js'
	const props = defineProps({
		authorData: {type:Array,required:true}
	})
	// 关注和取消关注
	async function attentionAuthor(value,uid,index){
		if(value){//取消关注
			await request.get('/unfollow_author',{im_concerned_uid:uid})
			props.authorData[index].concernedUser = false
		}else{//关注
			await request.get('/follow_author',{im_concerned_uid:uid})
			props.authorData[index].concernedUser = true
		}
	}
</script>

<style scoped>
/* 搜索作者 */
.search-author{
	padding: 10px;
}
.search-author img{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
}
.search-author div{
	font-size: 16px;
}
.search-author div:nth-child(2){
	flex: 1;
	padding: 0 10px;
}
.search-author div:nth-child(3){
	padding: 6px 0;
	width: 80px;
	text-align: center;
	border-radius: 4px;
}
.yiguanzhu{
	border:1px solid #797979;
}
.weiguanzhu{
	background-color: #e8df4d;
}
.search-author-name p{
	padding: 2px 0;
}
.search-author-name p:nth-child(1){
	font-weight: bold;
}
.search-author-name p:nth-child(2){
	color: #797979;
	font-size: 15px !important;
}
</style>